<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <title>周计划折线图</title>
    <script src="../../res/echarts/echarts.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="../../res/layui/css/layui.css" media="all">
    <script src="../../res/js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="yeqian/js/xm-select.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../res/layui/layui.js" charset="utf-8"></script>
</head>
<style>
    .curriculum {
        width: 100%;
        margin: 0 auto;
    }

    .xiala {
        width: 70%;
        margin: 0 auto;
        float: left;
    }

    .seach {
        margin: 0 auto;
        text-align: center;
        line-height: 80px;
        width: 35%;
    }

</style>

<body>
<script>
    layui.use(['form', 'laydate'], function () {
        var form = layui.form, laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#startTime',
            trigger: 'click',
            type: 'date'
        });

        laydate.render({
            elem: '#endTime',
            trigger: 'click',
            type: 'date'
        });
    });
</script>


<div class="curriculum">
    <div class="seach">
        <div id="WeekId" class="xm-select-demo xiala"></div>
        <input type="button" id="valueStr" class="layui-btn layui-btn-normal"
               style="float: left; width: 18%" value="查看"/>
    </div>

    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="float:left;width:80%;height:400px;"></div>
</div>
<script type="text/javascript">
    var url = '../../atsWeekController/comboBox';
    var seleCur = [];
    var demo2 = null;
    $.post(url, null, function (obj) {
        $.each(obj, function (index, item) {
            seleCur.push({name: item.weekName, value: item.weekId});
        });
        demo2 = xmSelect.render({
            el: '#WeekId',
            data: seleCur,
        });
        console.info(seleCur);//获取value

        document.getElementById('valueStr').onclick = function () {
            //获取当前多选选中的值
            var selectArr = demo2.getValue('valueStr');
            console.info(selectArr);//获取value
            var url = '../../atsWeekController/weekEchar';
            var data = {ids: selectArr}
            $.post(url, data, function (obj) {
                if (obj != null) {
                    //基于准备好的dom初始化echarts实例
                    var myChart = echarts.init(document.getElementById('main'));
                    var intensity = [];
                    var scale = [];
                    var load = [];
                    var xAxis = [];
                    $.each(obj, function (index, item) {
                        xAxis.push(item.weekName);
                        intensity.push(Math.round(item.curIntensity*100)/100);
                        scale.push(Math.round(item.curScale*100)/100);
                        load.push(Math.round(item.weekLoad*100)/100);
                    });
                    var zhibiao = ['运动强度', '运动量', '运动负荷'];
                    var datas = [intensity, scale, load];
                    console.info(datas)
                    var item = null;
                    var series = [];
                    for (var i = 0; i < zhibiao.length; i++) {
                        item = {
                            name: zhibiao[i],
                            type: 'line',
                            data: datas[i]
                        };
                        series.push(item);
                    }
                    option = {
                        title: {
                            text: '周训练负荷分析'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: zhibiao
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: xAxis
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: series
                    };


                    myChart.setOption(option);
                }

            });

        };
    });

</script>
</body>
</html>
